<template>
  <div class="leader">
    <div class="twobtn">
      <span v-for="(item, index) in btns" @click="initData(index, index)" :class="btnindex == index ? 'active' : ''">
        {{ $t(item) }}
      </span>
    </div>
    <table>
      <thead>
        <tr>
          <th>{{ $t("language.Share.leader.head1") }}</th>
          <th>{{ $t("language.Share.leader.head2") }}</th>
          <th>{{ $t("language.Share.leader.head3") }}</th>
          <th>{{ $t("language.Share.leader.head4") }}</th>
          <th>{{ $t("language.Share.leader.head5") }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in rank.list" :key="index">
          <td :height="[0, 1, 2].includes(index) ? 53 : ''">
            <NuxtImg v-if="index == 0" src="/img/l1.png" alt="" />
            <NuxtImg v-else-if="index == 1" src="/img/l2.png" alt="" />
            <NuxtImg v-else-if="index == 2" src="/img/l3.png" alt="" />
            <template v-else>{{ index + 1 }}</template>
          </td>
          <td>{{ item.gameId }}</td>
          <td>{{ item.nickname }}</td>
          <td>{{ item.spreaderId }}</td>
          <td>{{ item.coins }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import {  reactive, shallowRef,computed } from "vue";
let btns = reactive(["language.Share.leader.btn1", "language.Share.leader.btn2"]);
let btnindex = shallowRef(0);
let props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});
// const { proxy } = getCurrentInstance();
//获取推广明细
let store=useStore()
let info =computed(()=>store.userinfo)
let rankform = reactive<{ pageIndex: number, pageSize: number, id: number, pageType: number }>({
  pageIndex: 1,
  pageSize: 50,
  id: info.value.gameID,
  pageType: 0
})
let rank = reactive({
  list: [] as { gameId: number, nickname: string, spreaderId: number, coins: number }[]
})
let initData = async (index: number, pageType: any) => {
  btnindex.value = index
  rankform.pageType = pageType
  await nextTick()
  useAllData('/Share/Rank', `/UserCenter/v1.0/Promotion/Share/Rank`, rankform).then(({ data }: { data: any }) => {
    rank.list = data.value.data.rankings
    // nextTick(() => {
    //   detail.members = data.data.members
    // })
  })
}
initData(0, "")
</script>

<style scoped lang="scss">
.leader {
  width: 100%;
  padding: 0 10px;


  .twobtn {
    @include flex(row, flex-start, center);
    margin-top: 10px;
    border-radius: 5px;

    span {
      color: #b5bac8;
      font-size: 14px;
      background-color: #4a4c53;
      cursor: pointer;
    }

    span:nth-child(1) {
      padding: 8px;

      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }

    span:nth-child(2) {
      padding: 8px;

      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    .active {
      background-color: #0a906c;
      color: #fff;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    padding: 0;
    border: 1px solid #3d4148;


    thead {
      height: 65px;

      th {
        text-align: center;
        font-size: 14px;
        color: #b5bac8;
        height: 100%;
        padding: 8px;
        line-height: 24px;
        font-weight: bold;
        background-color: rgb(61, 65, 72);
        border: 1px solid #4b4e55;
      }
    }



    tbody {
      width: 100%;
      height: 400px;
      overflow: auto;
    }

    tr {


      td {
        text-align: center;
        font-size: 14px;
        color: #b5bac8;
        padding: 4px 8px;

        border: 1px solid #3d4148;

        img {
          width: 40px;
        }
      }
    }


  }
}
</style>
